<template>
  <div class="contianer">
    <!-- 弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="tableSetting.dialogVisible"
      width="40%"
    >
      <div class="dialogContainer">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            v-for="(item, index) in tableSetting.tableOption"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
          >
            <template slot-scope="scope">
              <!-- 输入框 -->
              <div class="tableItem" v-if="item.type === 'input'">
                <el-input
                  v-model="scope.row[item.prop]"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <!-- 下拉框 -->
              <div class="tableItem" v-if="item.type === 'select'">
                <el-select v-model="scope.row[item.prop]" placeholder="请选择">
                  <el-option
                    v-for="(option, _index) in item.options"
                    :key="_index"
                    :label="option.label"
                    :value="option.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <!-- 单选框 -->
              <div class="tableItem" v-if="item.type === 'radio'">
                <el-radio-group v-model="scope.row[item.prop]">
                  <el-radio
                    :label="radio.value"
                    v-for="(radio, _index) in item.options"
                    :key="_index"
                    >{{ radio.label }}</el-radio
                  >
                </el-radio-group>
              </div>
              <!-- 日期选择框 -->
              <div class="tableItem" v-if="item.type === 'date'">
                <el-date-picker
                  v-model="scope.row[item.prop]"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tableSetting.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    tableSetting: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      tableData: [],
    };
  },

  created() {},
  mounted() {
    this.getTableData();
  },

  methods: {
    // 获取表格数据
    async getTableData() {
      const res = await this.tableSetting.api(this.tableSetting.requestParams);
      if (res.success) {
        this.tableData = res.data;
      }
    },
    // 点击确定
    sure() {
      this.$emit("save", this.tableData);
    },
  },
};
</script>

<style scoped lang='scss'>
</style>
